<template>
  <div>网盘实现
    <div>
      <uploader :options="options" class="uploader-example">
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <p>拖拽文件到这或</p>
          <uploader-btn>选择文件</uploader-btn>
          <uploader-btn :attrs="attrs">选择图片</uploader-btn>
          <uploader-btn :directory="true">选择文件夹</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
    </div>
    <div style="margin-top: 5px">
      <el-table :key="tableKey" :data="list" v-loading.body="listLoading" size="mini" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="文件名" min-width="150">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="大小" min-width="100">
          <template slot-scope="scope" v-if="scope.row.size > 0">
            {{scope.row.size}}
          </template>
          <template slot-scope="scope" v-if="scope.row.size === 0">
            {{'-'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间" min-width="185">
          <template slot-scope="scope">
            {{scope.row.modifydatetime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="路径" min-width="185">
          <template slot-scope="scope">
            {{scope.row.filePath}}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" min-width="185" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-download" @click="handelZipDownload(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading">
        <el-pagination :page-sizes="[5,10,20]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { page } from '@/api/disk'
// import fileDownload from 'js-file-download'
import download from 'downloadjs'
import axios from 'axios'
// var fs = require('fs')
// var unzip = require('unzip')
// import fs from 'fs'
// import unzip from 'unzip'
export default {
  data () {
    return {
      options: {
        // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
        target: '//10.30.90.45:9991/zuul/api/yun-disk/fileUploadController/upload2',
        // target: '//10.30.90.45:9991/api/yun-disk/fileUploadController/upload2',
        headers: {
          'access-token': getToken()
        },
        testChunks: false,
        chunkSize: 500 * 1024 * 1024
      },
      attrs: {
        accept: 'image/*'
      },
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      filename: null,
      listQuery: {
        page: 1,
        limit: 5,
        name: undefined
      }
    }
  },
  methods: {
    getList () {
      this.listLoading = true
      page(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    handelZipDownload (val) {
      // zipDownload({filePath: val.filePath}).then(response => {
      //   let disposition = response.headers['content-disposition']
      //   let filename = decodeURI(disposition.match(/filename="(.*)"/)[1])
      //   fileDownload(response.data, filename)
      // }).catch(error => {
      //   console.log(error)
      // })

      // let res = axios({
      //   // ...
      //   url: 'http://10.30.90.45:9991/zuul/api/yun-disk/fileUploadController/zipDownload',
      //   method: 'get',
      //   params: {filePath: val.filePath},
      //   headers: {'access-token': getToken()},
      //   responseType: 'blob'
      // })
      // this.res = res
      // console.log('res:' + res)
      // let disposition = res.headers['content-disposition']
      // let filename = decodeURI(disposition.match(/filename="(.*)"/)[1])
      // fileDownload(res.data, filename)

      axios({
        // ...
        url: 'http://10.30.90.45:9991/zuul/api/yun-disk/fileUploadController/zipDownload2',
        method: 'get',
        params: {filePath: val.filePath},
        headers: {'access-token': getToken()},
        responseType: 'arraybuffer'
      }).then(res => {
        console.log('res:' + res)
        let disposition = res.headers['content-disposition']
        console.log(disposition)
        console.log(res.headers['content-type'])
        let filename = decodeURI(disposition.match(/filename="(.*)"/)[1])
        // fileDownload(res.data, filename)
        this.filename = filename
        download(res.data, filename + '.zip')
      })

      // fs.createReadStream('D:/Downloads/' + this.filename + '.zip').pipe(unzip.Extract({ path: 'C:/ap/' + this.filename }))
      // https://blog.csdn.net/yunlala_/article/details/78385962  axio下载
      // window.location.href = 'http://10.30.90.136:8010/fileUploadController/zipDownload?filePath=' + val.filePath
      // axios.defaults.headers.common['access-token'] = getToken()
      // axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
      // axios({
      //   method: 'get',
      //   url: 'http://10.30.90.45:9991/api/yun-disk/fileUploadController/zipDownload?filePath=' + val.filePath,
      //   responseType: 'stream',
      //   headers: {'access-token': getToken()}
      // })
      //   .then(function (response) {
      //     console.log(response.headers)
      //     response.data.pipe(fs.createWriteStream('ada_lovelace.zip'))
      //   })
    }
  },
  created: function () {
    this.getList()
  }
}
</script>

<style>
  .uploader-example {
    /*width: 880px;*/
    /*padding: 15px;*/
    /*margin: 40px auto 0;*/
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
